<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/sass/home.css">
    <!--    <script src="../static/js/vue3.js"></script>-->
    <style>
        .group {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            text-align: center;
        }

        .child {
            border: 1px solid #eee;
            padding: 5px;
            margin-bottom: 5px;
        }

        .param {
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div class="home-container">
    <div class="home-title">接口管理界面</div>
    <div id="app" class="home-content">
    </div>
</div>
<script src="../static/js/common.js"></script>
<script>
    let router_data = JSON.parse('{{RouterData|safe}}');
    // 获取要展示数据的容器元素
    const app = document.getElementById('app');
    router_data.forEach(groupItem => {
        const groupDiv = document.createElement('div');
        groupDiv.classList.add('group');
        groupDiv.innerHTML = `<h2>Group: ${groupItem.group}</h2>`;
        // 遍历子项
        groupItem.children.forEach(child => {
            // 创建子项元素
            const childDiv = document.createElement('div');
            childDiv.classList.add('child');
            childDiv.innerHTML = `
                    <span>Method: ${child.method}</span>
                    <span>Model: ${child.model}</span>
                    <span>Operation: ${child.operation}</span>
                    <span>Path: ${child.path}</span>
                    <span>Params:</span>
                `;

            // 遍历参数
            child.params.forEach(param => {
                // 创建参数元素
                const paramDiv = document.createElement('div');
                paramDiv.classList.add('param');
                paramDiv.innerHTML = `
                        <p>Name: ${param.name}</p>
                        <p>Source: ${param.source}</p>
                        ${param.enable !== undefined ? `<p>Enable: ${param.enable}</p>` : ''}
                        ${param.type ? `<p>Type: ${param.type}</p>` : ''}
                    `;
                childDiv.appendChild(paramDiv);
            });

            groupDiv.appendChild(childDiv);
        })
        app.appendChild(groupDiv);
    })
    console.log(router_data)
</script>
</body>
</html>